<template>
  <div style="padding: 20px">
    <div>
      <div style="margin-bottom: 20px">
        <community-select-second ref="communitySelect" @callBack="callBack"></community-select-second>
        <Select placeholder="请选择类型" v-model="params.level" style="width:164px;margin-right: 10px">
          <Option value="">全部</Option>
          <Option value="40">社区</Option>
          <Option value="45">村</Option>
        </Select>
        <Select placeholder="请选择达标类型" v-model="params.jg" style="width:164px;margin-right: 10px">
          <Option value="">全部</Option>
          <Option value="1">是</Option>
          <Option value="0">否</Option>
        </Select>
        <Input v-model="params.area_begin" type="number" placeholder="请输入面积开始范围"
               style="width: 164px;margin-right: 10px">
        </Input>
        <Input v-model="params.area_end" type="number" placeholder="请输入面积结束范围" style="width: 164px;margin-right: 10px">
        </Input>
        <Button type="primary" style="margin-right: 10px" @click="findInit">查询</Button>
        <Button type="success" @click="findZhfwssMxNoPageList">导出数据</Button>
      </div>
      <!--      </Col>-->
      <!--    </Row>-->
    </div>
    <Table ref="table" border :columns="tableColumns" :data="tableData" :loading="tableLoading">
      <template slot-scope="{ row, index }" slot="jg">
        <span v-show="row.jg === 1">是</span>
        <span v-show="row.jg === 0">否</span>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <Button type="success" size="small" @click="getMX(row)">明细</Button>
      </template>
    </Table>
    <Row type="flex" justify="end" class="page_style">
      <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize" show-elevator
            @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
    </Row>
      <Modal
          width="1200"
          v-model="modal"
          title="明细">
        <Table border :columns="modalColumns" :data="modalData">
          <template slot-scope="{ row, index }" slot="level">
            <span v-show="row.level === '40'">社区</span>
            <span v-show="row.level === '45'">村</span>
          </template>
          <template slot-scope="{ row, index }" slot="jg">
            <span v-show="row.jg === 1">是</span>
            <span v-show="row.jg === 0">否</span>
          </template>
        </Table>
        <div slot="footer">
          <Button type="primary" @click="modal = false">确定</Button>
        </div>
      </Modal>
  </div>
</template>

<script>
import { findMerchantForCommunityList, findZhfwssMxList, findZhfwssMxNoPageList } from '../../api/eventlist'
import CommunitySelectSecond from '../../components/community-select-second'

export default {
  name: 'index',
  components: { CommunitySelectSecond },
  data () {
    return {
      severUserInfo: {},
      modalColumns: [
        {
          title: '小区名称',
          key: 'residential_name',
          align: 'center'
        },
        {
          title: '网格名称',
          key: 'garden_name',
          align: 'center'
        },
        {
          title: '综合服务设施名称',
          key: 'name',
          align: 'center'
        },
        {
          title: '办公电话',
          key: 'place_fzr_phone',
          align: 'center'
        },
        {
          title: '面积',
          key: 'place_area',
          align: 'center'
        }
      ],
      modalData: [],
      modal: false,
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      tableColumns: [
        {
          title: '区/县',
          key: 'area_name',
          align: 'center'
        },
        {
          title: '街道/乡镇',
          key: 'street_name',
          align: 'center'
        },
        {
          title: '社区/村',
          key: 'community_name',
          align: 'center'
        },
        {
          title: '综合服务设施面积（㎡）',
          key: 'place_area',
          align: 'center'
        },
        {
          title: '类型',
          key: 'level',
          align: 'center'
        },
        {
          title: '是否达标',
          slot: 'jg',
          align: 'center'
        },
        {
          title: '数量',
          key: 'sl',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      exportTableColumns: [
        {
          title: '区/县',
          key: 'area_name',
          align: 'center'
        },
        {
          title: '街道/乡镇',
          key: 'street_name',
          align: 'center'
        },
        {
          title: '社区/村',
          key: 'community_name',
          align: 'center'
        },
        {
          title: '综合服务设施面积（㎡）',
          key: 'place_area',
          align: 'center'
        },
        {
          title: '类型',
          key: 'level',
          align: 'center'
        },
        {
          title: '是否达标',
          key: 'jg',
          align: 'center'
        },
        {
          title: '数量',
          key: 'sl',
          align: 'center'
        }
        // {
        //   title: '操作',
        //   slot: 'action',
        //   width: 150,
        //   align: 'center'
        // }
      ],
      tableData: [],
      tableLoading: false
    }
  },
  methods: {
    callBack (e) {
      console.log('callBack', e)
      this.params.area_id = e.area_id
      this.params.street_id = e.street_id
      this.params.community_id = e.community_id
    },
    getMX (row) {
      let data = {
        community_id: row.community_id,
        select_type: 'Z0001'
      }
      findMerchantForCommunityList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.modalData = ret.data.data
          this.modal = true
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    findInit () {
      this.params.pageNo = 1
      this.init()
    },
    init () {
      if (this.params.area_begin !== undefined && this.params.area_begin !== '') {
        if (this.params.area_begin < 0) {
          this.$Notice.error({ title: '数据异常！', desc: '面积开始范围数据异常' })
          return
        }
      }
      if (this.params.area_end !== undefined && this.params.area_end !== '') {
        if (this.params.area_end < 0) {
          this.$Notice.error({ title: '数据异常！', desc: '面积结束范围数据异常' })
          return
        }
      }
      this.tableLoading = true
      findZhfwssMxList(this.params).then(ret => {
        if (ret.data.errcode === 0) {
          this.tableData = ret.data.data.results
          this.params.totalRecord = ret.data.data.totalRecord
          this.tableLoading = false
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    // 翻页
    pageAction (page) {
      this.params.pageNo = page
      this.init()
    },
    // 改变条数
    pageSizeChange (e) {
      this.params.pageSize = e
      this.init()
    },
    findZhfwssMxNoPageList () {
      findZhfwssMxNoPageList(this.params).then(ret => {
        if (ret.data.errcode === 0) {
          this.$refs.table.exportCsv({
            filename: '综合服务设施统计明细',
            columns: this.exportTableColumns,
            data: ret.data.data
          })
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    }
  },
  mounted () {
    this.severUserInfo = this.$store.state.user.severUserInfo
    this.init()
    this.$refs.communitySelect.init(this.severUserInfo)
  }
}
</script>

<style scoped>
.page_style {
  margin: 20px 5px;
}
</style>
